import React, { memo } from 'react';
import { CommentWrapper } from './style';
import { formatImg } from '@/utils/format'
import LikeOutlined from '@ant-design/icons'
import { Pagination } from 'antd'
export default memo(function style(props) {
  const { totalComment, commentList, pageSize, pageChange } = props
  const comments = commentList || []
  return (
    <CommentWrapper>
      <div className="header">
        <span className='title'>评论</span>
        <span className='count'>共{totalComment}条评论</span>
      </div>
      <div className='line'>最新评论</div>
      <div className="list">
        {
          comments.map(item => {
            return (
              <div key={item.commentId} className='comment_item'>
                <div className="left">
                  <img src={formatImg(item.user.avatarUrl,50)} alt="" />
                </div>
                <div className="right">
                  <p><a href="fas" className='nickname'>{item.user.nickname}</a>:{item.content}</p>
                  <div className="row">
                    <div className='time'>{item.timeStr}</div>
                    <div className="operation">
                    <LikeOutlined />({item.likedCount})<a href="fa" className='reply'>回复</a>
                    </div>
                  </div>
                </div>
              </div>
            )
          })
        }
      </div>
      {
        comments.length < pageSize ? null :
          <Pagination defaultCurrent={1}
                      total={totalComment}
                      showSizeChanger={false}
                      pageSize={pageSize}
                      onChange={pageChange}
                      className='pagination'/>
      }
    </CommentWrapper>
  );
});
